<template>
  <el-dialog
    title="评价下级详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="evalcontent"
  >
    <div class="jiazhititle">价值观行为考核要素</div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">用户至上 <span style="color: #0000cc">{{dataForm.firstValueScore}}</span> 分</div>
<!--        <div class="flexcont">{{dataForm.firstValueScore}}<span>分</span></div>-->
      </div>
      <div v-show="dataForm.firstValueScore==1||dataForm.firstValueScore==5">
        <div class="illtitle">评分举例说明 </div>
        <div class="illcontent">
          {{dataForm.firstValueDescribe}}
        </div>
<!--        <div class="illtitle">点击上传图片进行补充说明（选填）</div>-->
        <div class="illcontent">
          <img class="imgView" v-for="item in fileLists1" :src="item.url" alt="" @click="setbig(item.url)">
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">正直坦诚 <span style="color: #0000cc">{{dataForm.secondValueScore}}</span> 分</div>
<!--        <div class="flexcont">{{dataForm.secondValueScore}}<span>分</span></div>-->
      </div>
      <div v-show="dataForm.secondValueScore==1||dataForm.secondValueScore==5">
        <div class="illtitle">评分举例说明 </div>
        <div class="illcontent">
          {{dataForm.secondValueDescribe}}
        </div>
<!--        <div class="illtitle">点击上传图片进行补充说明（选填）</div>-->
        <div class="illcontent">
          <img class="imgView" v-for="item in fileLists2" :src="item.url" alt="" @click="setbig(item.url)">
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">极致执行 <span style="color: #0000cc">{{dataForm.thirdValueScore}}</span> 分</div>
<!--        <div class="flexcont">{{dataForm.thirdValueScore}}<span>分</span></div>-->
      </div>
      <div v-show="dataForm.thirdValueScore==1||dataForm.thirdValueScore==5">
        <div class="illtitle">评分举例说明 </div>
        <div class="illcontent">
          {{dataForm.thirdValueDescribe}}
        </div>
<!--        <div class="illtitle">点击上传图片进行补充说明（选填）</div>-->
        <div class="illcontent">
          <img  class="imgView" v-for="item in fileLists3" :src="item.url" alt="" @click="setbig(item.url)">
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
<!--        <div class="sortitle">精进创新 </div>-->
        <div class="sortitle">精进创新 <span style="color: #0000cc">{{dataForm.fourthValueScore}}</span> 分</div>
<!--        <div class="flexcont">{{dataForm.fourthValueScore}}<span>分</span></div>-->
      </div>
      <div v-show="dataForm.fourthValueScore==1||dataForm.fourthValueScore==5">
        <div class="illtitle">评分举例说明</div>
        <div class="illcontent">
          {{dataForm.fourthValueDescribe}}
        </div>
<!--        <div class="illtitle">点击上传图片进行补充说明（选填）</div>-->
        <div class="illcontent">
          <img class="imgView" v-for="item in fileLists4" :src="item.url" alt="" @click="setbig(item.url)">
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">团结共赢 <span style="color: #0000cc">{{dataForm.fifthValueScore}}</span> 分</div>
<!--        <div class="flexcont">{{dataForm.fifthValueScore}}<span>分</span></div>-->
      </div>
      <div v-show="dataForm.fifthValueScore==1||dataForm.fifthValueScore==5">
        <div class="illtitle">评分举例说明 </div>
        <div class="illcontent">
          {{dataForm.fifthValueDescribe}}
        </div>
<!--        <div class="illtitle">点击上传图片进行补充说明（选填）</div>-->
        <div class="illcontent">
          <img class="imgView" v-for="item in fileLists5" :src="item.url" alt="" @click="setbig(item.url)">
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">返回</el-button>
    </span>
    <bigimg :bigimgsrc="bigsrc" v-if="showbig" @hideimg="hidebig"></bigimg>
  </el-dialog>
</template>
<script>
    import bigimg from '@/components/bigimg/index'
  export default {
    name: 'examinevaluate',
      components: {bigimg},
    data() {
      return {
        visible: false,
        fileLists1: [],
        fileLists2: [],
        fileLists3: [],
        fileLists4: [],
        fileLists5: [],
        disableds: false,
        dataForm: {},
        url: '',
        dialogVisible: false,
        dialogImageUrls: '',
        iskans: false,
        title: '',
        ischange: 0,
          showbig: false,
          bigsrc:"",
      }
    },
    mounted() {
        // this.init()
      // this.url = this.$http.adornUrl(
      //   `/operate/shareInfo/upload?token=${this.$cookie.get('token')}`
      // )
    },
    methods: {
      init(id, ischange) {
        // this.ischange = ischange
        this.visible = true

          // this.$nextTick(() => {
              this.$http({
                  url: this.$http.adornUrl(
                      `/value/valuecommentlog/getSuperiorEvaluationResult`
                  ),
                  method: 'get',
                  params: this.$http.adornParams({valueId:id, evaluationType:2})
              }).then(({data}) => {
                  if (data && data.code === 0) {
                      this.dataForm = data.result
                      this.dataForm.firstValueScore = parseInt(this.dataForm.firstValueScore)
                      this.dataForm.secondValueScore = parseInt(this.dataForm.secondValueScore)
                      this.dataForm.thirdValueScore = parseInt(this.dataForm.thirdValueScore)
                      this.dataForm.fourthValueScore = parseInt(this.dataForm.fourthValueScore)
                      this.dataForm.fifthValueScore = parseInt(this.dataForm.fifthValueScore)
                      let imglist1=[]
                      let imglist2=[]
                      let imglist3=[]
                      let imglist4=[]
                      let imglist5=[]
                      if(this.dataForm.firstValueImg) {
                          this.dataForm.firstValueImg.map((item, index)=> {
                              imglist1.push({name: index, url: item})
                          })
                      }
                      if(this.dataForm.secondValueImg) {
                          this.dataForm.secondValueImg.map((item, index)=> {
                              imglist2.push({name: index, url: item})
                          })
                      }
                      if(this.dataForm.thirdValueImg) {
                          this.dataForm.thirdValueImg.map((item, index)=> {
                              imglist3.push({name: index, url: item})
                          })
                      }
                      if(this.dataForm.fourthValueImg) {
                          this.dataForm.fourthValueImg.map((item, index)=> {
                              imglist4.push({name: index, url: item})
                          })
                      }
                      if(this.dataForm.fifthValueImg) {
                          this.dataForm.fifthValueImg.map((item, index)=> {
                              imglist5.push({name: index, url: item})
                          })
                      }
                      this.fileLists1 = imglist1
                      this.fileLists2 = imglist2
                      this.fileLists3 = imglist3
                      this.fileLists4 = imglist4
                      this.fileLists5 = imglist5
                  }
              });

      },

        setbig(imgUrl) {
            this.bigsrc = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIWlliaQwAmTODz9ec0tXFUicfhZP9qmJmot4vib7ZC3c9vmqXkSlL21sSHw8IcBLicrazZAGxXszr8FA/132'
            this.bigsrc = imgUrl
            this.showbig = true
        },
        hidebig() {
            this.showbig = false
        },


    }
  }
</script>
<style lang="scss">
  .imgView{
    width: 100px;
    margin: 20px;
  }
  .noChange .el-form-item__label{
    color: #bbb!important;
  }
  .evalcontent{
    .jiazhititle{
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .sourpont{
      padding: 20px 0;
    }
    .flexcont{
      display: flex;
      align-items: center;
      .sortitle{
        span{
          color: red;
        }
      }
      .el-input{
        width: 300px;
        margin: 0 10px 0 50px;
      }
    }
    .illtitle{
      margin: 20px 0 15px 0;
      span{
        color: red;
      }
    }
  }
</style>
